<link rel="stylesheet" href="__CDN__/assets/addons/vuemagic/element/element.css">
<link rel="stylesheet" href="__CDN__/assets/addons/vuemagic/common.css">
<script src="__CDN__/assets/addons/vuemagic/vue.js"></script>
<script src="__CDN__/assets/addons/vuemagic/element/element.js"></script>
<script src="__CDN__/assets/addons/vuemagic/Sortable.min.js"></script>
<script src="__CDN__/assets/addons/vuemagic/vuedraggable.js"></script>
<script src="__CDN__/assets/addons/vuemagic/moment.js"></script>
<!--以上js文件不是必须的，您可以将不使用的js删除掉，这里为了考虑所有字段类型情况全部进行了引入-->
<div id="formDetail" v-cloak>
    <div class="form-bodys">
        <el-form :model="baseFrom" ref="baseFrom" :rules="rules" label-width="114px" class="demo-baseFrom">
            <el-form-item label="{:__('Group_id')}：" prop="group_id">
                <div class="display-flex">
                    <div class="user-container">
                        <el-select style="position: relative;" v-model="baseFrom.group_id" filterable
                                   size="medium" placeholder="" :filter-method="dataGroupFilter">
                            <el-option v-for="item in aboutGroupOptions" :key="item.id"
                                       :label="item.name??item.username"
                                       :value="item.id">
                                <!--可根据自己的业务需求加工一下代码样式-->
                                <div class="display-flex" style="justify-content: space-around;">
                                    <span>{{ item.id }}</span>
                                    <div style="width: 24px;">
                                        <img v-if="item.image??item.avatar"
                                             style="width:24px;height:24px;border-radius:50%;"
                                             :src="Fast.api.cdnurl(item.image??item.avatar)">
                                    </div>
                                    <div style="width: 80px;">{{ item.name ?? item.username }}</div>
                                    <div style="width: 90px;">
                                        <div style="width: 90px;" v-if="item.mobile">{{ item.mobile }}</div>
                                        <div style="width: 90px;text-align: center;" v-else>-</div>
                                    </div>
                                </div>
                            </el-option>
                            <div class="text-center"
                                 style="position: sticky;background: #fff;height:38px;top:0;z-index:1">
                                <div class="text-normal display-flex" style="justify-content: center;">
                                    <el-pagination class="pagination" :page-sizes="[6]" :current-page="currentGroupPage"
                                                   :total="totalGroupPage"
                                                   layout="total, sizes, prev, pager,next, jumper"
                                                   pager-count="5" @size-change.stop="pageGroupSizeChange"
                                                   @current-change="pageGroupCurrentChange"/>
                                    </el-pagination>
                                    <div style="cursor: pointer;color: #7438D5;margin-left: 8px;" @click="getGroup">跳转
                                    </div>
                                </div>
                            </div>
                        </el-select>
                    </div>
                    <!--<div class="form-tip">此处可以放字段说明等信息</div>-->
                </div>
            </el-form-item>
            <el-form-item label="{:__('Username')}：" prop="username">
                <el-input v-model="baseFrom.username" placeholder="请输入{:__('username')}" size="medium"></el-input>
            </el-form-item>
            <!--        <el-form-item label="{:__('Nickname')}：" prop="nickname">-->
            <!--          <el-input v-model="baseFrom.nickname" placeholder="请输入{:__('nickname')}" size="medium"></el-input>-->
            <!--       </el-form-item>-->
            <el-form-item label="{:__('Password')}：" prop="password">
                <el-input v-model="baseFrom.password" placeholder="请输入{:__('password')}" size="medium"></el-input>
            </el-form-item>
            <el-form-item label="{:__('Salt')}：" prop="salt">
                <el-input v-model="baseFrom.salt" placeholder="请输入{:__('salt')}" size="medium"></el-input>
            </el-form-item>
            <!--        <el-form-item label="{:__('Email')}：" prop="email">-->
            <!--          <el-input v-model="baseFrom.email" placeholder="请输入{:__('email')}" size="medium"></el-input>-->
            <!--       </el-form-item>-->
            <el-form-item label="{:__('Mobile')}：" prop="mobile">
                <el-input v-model="baseFrom.mobile" placeholder="请输入{:__('mobile')}" size="medium"></el-input>
            </el-form-item>
            <el-form-item label="{:__('Avatar')}：" prop="avatar">
                <div class="display-flex">
                    <div class="goods-image-box display-flex" v-if="baseFrom.avatar">
                        <div class="goods-images" style="margin-right: 0;">
                            <img class="label-auto" :src="Fast.api.cdnurl(baseFrom.avatar)" style="border-radius: 4px;">
                            <div class="del-image-btn" @click="delImg('image',null,'avatar')">
                                <img class="label-auto" src="/assets/addons/vuemagic/img/close.png">
                            </div>
                        </div>
                    </div>
                    <div class="add-img display-flex" @click="addImg('image',null, false,'avatar','image/*')"
                         v-if="!baseFrom.avatar">
                        <i class="el-icon-plus"></i>
                    </div>
                    <div class="msg-tip">文件描述，如：建议尺寸、大小等</div>
                </div>
            </el-form-item>
            <el-form-item label="{:__('Gender')}：" prop="gender">
                <div class='control-relative'>
                    <el-input-number v-model="baseFrom.gender" :min="1" :max="9999" size="small"></el-input-number>
                </div>
            </el-form-item>
            <el-form-item label="{:__('Birthday')}：" prop="birthday">
                <el-date-picker v-model="baseFrom.birthday" type="datetime" placeholder="选择日期时间"></el-date-picker>
            </el-form-item>


            <el-form-item label="{:__('工种')}：" prop="work_type">
                <div class='control-relative'>
                    <el-input-number v-model="baseFrom.work_type" :min="1" :max="9999" size="small"></el-input-number>
                </div>
            </el-form-item>

        </el-form>
    </div>
    <div class="page-footer display-flex">
        <div @click="baseSub" class="btn-common footer-btn-1">取消</div>
        <div @click="baseSub('yes','baseFrom')" class="btn-common footer-btn-2">确定</div>
    </div>
</div>
